<template>
  <div style="width: 100%;">
    <el-page-header @back="goBack" content="收入合同列表"> </el-page-header>
    <el-divider></el-divider>
    <el-form :inline="true">
      <el-form-item>
        <el-input
          v-model="params.id"
          placeholder="合同编号"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.contractName"
          placeholder="合同名称"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.projectName"
          placeholder="项目名称"
          :clearable="true"
          ><i
            slot="suffix"
            @click="projectDialogVisible = true"
            class="el-input__icon el-icon-search"
          ></i
        ></el-input>
        <el-input v-model="params.pid" v-show="false"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="params.approveStatus"
          :value="params.approveStatus"
          :clearable="true"
        >
          <el-option label="审批状态" value=""></el-option>
          <el-option label="审批中" value="1"></el-option>
          <el-option label="审批不通过" value="2"></el-option>
          <el-option label="审批通过" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="params.contractType"
          :value="params.contractType"
          :clearable="true"
        >
          <el-option label="合同类型" value=""></el-option>
          <el-option label="总价合同" value="总价合同"></el-option>
          <el-option label="单价合同" value="单价合同"></el-option>
          <el-option label="成本加酬金合同" value="成本加酬金合同"></el-option>
          <el-option label="施工合同" value="施工合同"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.contractSignatory"
          placeholder="签订人"
          :clearable="true"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="params.createDate"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="true"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-input
          v-model="params.companyName"
          placeholder="甲方单位"
          :clearable="true"
          ><i
            slot="suffix"
            @click="companyDialogVisible = true"
            class="el-input__icon el-icon-search"
          ></i
        ></el-input>
        <el-input v-model="params.custId" v-show="false"></el-input>
      </el-form-item>
      <el-form-item style="margin-left: 10px">
        <el-button @click="handleSearch" type="primary">检索</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="pageResult.records"
      show-summary
      :summary-method="getTotal"
    >
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="合同编号" prop="id"></el-table-column>
      <el-table-column label="合同名称" prop="contractName"></el-table-column>
      <el-table-column label="合同类型" prop="contractType"></el-table-column>
      <el-table-column label="甲方单位" prop="partyA"></el-table-column>
      <el-table-column label="所属项目" prop="projectName"></el-table-column>
      <el-table-column label="乙方单位" prop="partyB"></el-table-column>
      <el-table-column
        label="签订人"
        prop="contractSignatory"
      ></el-table-column>
      <el-table-column label="签订日期" prop="createDate"></el-table-column>
      <el-table-column label="合同金额" prop="contractAmount"></el-table-column>
      <el-table-column label="流程状态" prop="approveStatus">
        <template slot-scope="scope">
          <span
            style="color: orange;font-weight: 700"
            v-if="scope.row.approveStatus == '1'"
            >审批中</span
          >
          <span
            style="color: red;font-weight: 700"
            v-if="scope.row.approveStatus == '2'"
            >审批不通过</span
          >
          <span
            style="color: green;font-weight: 700"
            v-if="scope.row.approveStatus == '3'"
            >审批通过</span
          >
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-dropdown @command="handleCommand" trigger="click">
            <el-button>
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :command="{ row: scope.row, type: 'remove' }"
                v-if="scope.row.approveStatus == '2'"
                >删除</el-dropdown-item
              >
              <!-- <el-dropdown-item :command="{row:scope.row,type:'project'}">项目详情</el-dropdown-item> -->
              <el-dropdown-item :command="{ row: scope.row, type: 'details' }"
                >收入合同详情</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="项目选择"
      :visible.sync="projectDialogVisible"
      width="70%"
    >
      <project-info-list
        @row="handleSetProject"
        v-if="projectDialogVisible"
      ></project-info-list>
    </el-dialog>

    <el-dialog
      title="甲方单位选择"
      :visible.sync="companyDialogVisible"
      width="70%"
    >
      <tender-company-list
        @row="handleSetCompany"
        v-if="companyDialogVisible"
      ></tender-company-list>
    </el-dialog>

    <el-divider></el-divider>

    <el-footer class="case-list-footer">
      <el-pagination
        style="margin: 10px auto"
        background
        layout="total , sizes ,prev, pager, next,jumper"
        :page-sizes="[5, 10, 15, 20]"
        :total="pageResult.total"
        :page-size="pageResult.size"
        class="pagination"
        @current-change="handleIndexChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </el-footer>
  </div>
</template>

<script>
const ProjectInfoList = () =>
  import("../../common/projectInfo/ProjectInfoList.vue");
const TenderCompanyList = () => import("./TenderCompanyList.vue");

import { IncomeContractService } from "../../../model/sy/IncomeContractService.js";
const incomeContractService = IncomeContractService.getInstance();

export default {
  data() {
    return {
      params: {
        id: "",
        projectName: "",
        approveStatus: "",
        contractName: "",
        contractType: "",
        contractSignatory: "",
      },
      projectTypeList: [],
      pageResult: [],
      projectDialogVisible: false,
      companyDialogVisible: false,
    };
  },
  methods: {
    getTotal(param) {
      const { columns, data } = param;
      // console.log(columns, data);
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        const values = data.map((item) => Number(item[column.property]));
        // console.log(values);
        if (column.property === "contractAmount") {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
        } else {
          sums[index] = "-";
        }
      });
      return sums;
    },
    handleSetCompany(row) {
      // 设置甲方单位
      this.params.custId = row.id;
      this.params.companyName = row.companyName;
      this.companyDialogVisible = false;
    },
    handleSetProject(row) {
      // 设置项目名称
      this.params.pid = row.id;
      this.params.projectName = row.projectName;
      this.projectDialogVisible = false;
    },
    getIncomeContractData() {
      if (this.params.createDate) {
        this.params.createDate1 = this.params.createDate[0];
        this.params.createDate2 = this.params.createDate[1];
        this.params.createDate = null;
      }
      if (!this.params.projectName) {
        this.params.pid = "";
      }
      if (!this.params.companyName) {
        this.params.custId = "";
      }
      incomeContractService.getIncomeContractData(this.params).then((res) => {
        if (res.data.code === 0) {
          this.pageResult = res.data.data;
        }
      });
    },
    handleSearch() {
      this.params.page = 1;
      this.getIncomeContractData();
    },
    handleIndexChange(index) {
      this.params.page = index;
      this.getIncomeContractData();
    },
    handleSizeChange(size) {
      this.params.size = size;
      this.getIncomeContractData();
    },
    handleCommand(command) {
      switch (command.type) {
        case "details":
          this.handleShowDetails(command.row);
          break;
      }
    },
    handleShowDetails(row) {
      this.$router.push({
        name: "IncomeContract",
        params: {
          row,
        },
      });
    },
    goBack() {
      history.back();
    },
  },
  created() {
    this.getIncomeContractData();
  },
  components: {
    ProjectInfoList,
    TenderCompanyList,
  },
};
</script>

<style scoped>
.el-input__icon {
  cursor: pointer;
}
</style>
